<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>个人空间</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/lhgcalendar/lhgcore.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/lhgcalendar/lhgcalendar.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!-- bootstrap -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css"
	rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="${pageContext.request.contextPath}/css/dashboard.css"
	rel="stylesheet">
<!-- Custom Theme files -->
<link href="${pageContext.request.contextPath}/css/style.css"
	rel='stylesheet' type='text/css' media="all" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<link href="${pageContext.request.contextPath}/css/fileinput.css"
	media="all" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/font-awesome.min.css"
	media="all" rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/fileinput.js"
	type="text/javascript"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
</head>
<body>

<jsp:include page="header.jsp"></jsp:include>

	<!-- upload -->
	<div class="upload">
		<!-- container -->
		<div class="container">
			<!-- 报表编辑页面内容 -->
			<div class="row clearfix report-content">
				<div class="col-md-2 column report-left">
					<div class="form-group text-center report-left-cell">
						<div class="glyphicon glyphicon-wrench">&nbsp;基本设置</div>
					</div>
					<div class="form-group text-center report-left-cell">
						<div class="glyphicon glyphicon-globe">&nbsp;头像设置</div>
					</div>
					<div class="form-group text-center report-left-cell">
						<div class="glyphicon glyphicon-tasks">&nbsp;密码设置</div>
					</div>
					<div class="form-group text-center report-left-cell">
						<div class="glyphicon glyphicon-plus">&nbsp;播单设置</div>
					</div>
				</div>
				<div class="col-md-10 column video-grid">
					<div class="user-container">
						<form action="${pageContext.request.contextPath}/users/update?username=${username }"
							method="post" id="updateid">
							<div class="account-message user-item ">
								<div class="account-message-header">
									<h3>账号信息</h3>
									<hr />
								</div>
								<div class="account-message-content">
									<div class="column">
										<h4>
											<span class="account-message-content-title">账户信息</span>
										</h4>
										<p>
											用户昵称：<input type="text" name="nickname" value="${users.nickname}" />
										</p>
										<p>
											家庭地址：<select onclick="change_now_pv(this)"
												onchange="chinaChange(this,document.getElementById('city'));"
												style="width: 10%; height: 30px; line-height: 30px;"
												name="province1">
												<option class="province_select" value="北京市">北京市 </option>
												<option class="province_select" value="天津市">天津市 </option>
												<option class="province_select" value="上海市">上海市 </option>
												<option class="province_select" value="重庆市">重庆市 </option>
												<option class="province_select" value="河北省">河北省 </option>
												<option class="province_select" value="山西省">山西省 </option>
												<option class="province_select" value="辽宁省">辽宁省 </option>
												<option class="province_select" value="吉林省">吉林省 </option>
												<option class="province_select" value="黑龙江省">黑龙江省</option>
												<option class="province_select" value="江苏省">江苏省 </option>
												<option class="province_select" value="浙江省">浙江省 </option>
												<option class="province_select" value="安徽省">安徽省 </option>
												<option class="province_select" value="福建省">福建省 </option>
												<option class="province_select" value="江西省">江西省 </option>
												<option class="province_select" value="山东省">山东省 </option>
												<option class="province_select" value="河南省">河南省 </option>
												<option class="province_select" value="湖北省">湖北省 </option>
												<option class="province_select" value="湖南省">湖南省 </option>
												<option class="province_select" value="广东省">广东省 </option>
												<option class="province_select" value="海南省">海南省 </option>
												<option class="province_select" value="四川省">四川省 </option>
												<option class="province_select" value="贵州省">贵州省 </option>
												<option class="province_select" value="云南省">云南省 </option>
												<option class="province_select" value="陕西省">陕西省 </option>
												<option class="province_select" value="甘肃省">甘肃省 </option>
												<option class="province_select" value="青海省">青海省 </option>
												<option class="province_select" value="台湾省">台湾省 </option>
												<option class="province_select" value="广西壮族自治区">广西壮族自治区</option>
												<option class="province_select" value="内蒙古自治区">内蒙古自治区</option>
												<option class="province_select" value="西藏自治区"> 西藏自治区</option>
												<option class="province_select" value="宁夏回族自治区"> 宁夏回族自治区 </option>
												<option class="province_select" value="新疆维吾尔自治区">新疆维吾尔自治区</option>
												<option class="province_select" value="香港特别行政区">香港特别行政区</option>
												<option class="province_select" value="澳门特别行政区">澳门特别行政区</option>
											</select><select name="city" id="city" onclick=""
												style="width: 10%; height: 30px; line-height: 30px;">
											</select>
										</p>
										<p>
											出生年月：<input
												value='<fmt:formatDate value='${users.birthday}' pattern='yyyy-MM-dd'/>'
												type="text" id="c2" name="birthday"
												onclick="J.calendar.get({to:'2009-8-8,min'});" />
										</p>
										<p>个人介绍</p>
										<textarea type="button" class="form-control" name="intro">${users.intro }</textarea>
									</div>
								</div>
								<div class="form-group">
									<button class="btn btn-info " type="submit" onclick="ale()">保存信息</button>
									<button class="btn btn-danger" type="reset" name="button"
										id="button">重置</button>
								</div>
							</div>
						</form>
					<form action="uploadheadicon" method="POST" name="xiangmu" id="xiangmu" enctype="multipart/form-data">
						<div class="account-email-bind user-item " style="display: none;">
							<div class="account-message-header">
								<h3>头像设置</h3>
								<hr />
							</div>
						<div class="account-email-content">
								<div class="video-grid">
									<img class="play_video img-thumbnail"
										style="display: block; border: 1px solid #ccc" alt=""
										src="${pageContext.request.contextPath}/upload/head-icon/${users.picUrl}">
								</div>
								<div class="form-group">
									<br/>
									<input type="file" name="file1" />
									<br/>
									<button type="submit" class="btn btn-info" onclick="ale()">上传</button>
									<button class="btn btn-danger">取消</button>
								</div>
							</div>
						</div>
					</form>
						<div class="account-email-detail user-item "
							style="display: none;">
							<div class="account-message-header">
								<h3>密码设置</h3>
								<hr />
							</div>
							<div class="account-email-content">
								<div class="form-group">
									<p>旧密码</p>
									<input type="text" class="form-control" style="max-width: 300px;"
										name="old_password" id="oldpassword_register"></input>
								</div>
								<div class="form-group">
									<p>新密码</p>
									<input type="text" class="form-control" style="max-width: 300px;"
										name="new_password" id="newpassword_register"></input>
								</div>
								<div class="form-group">
									<p>确认密码</p>
									<input type="text" class="form-control" style="max-width: 300px;"
										name="confirm_password" id="confirmpassword_register"></input>
								</div>
								<div class="form-group">
									<button class="btn btn-info update_submit" >确认更改</button>
									<button type="input" class="btn btn-danger " onclick="cl()">取消</button>
									<span id="addMsg" style="color: red;"></span>
								</div>
							</div>
						</div>
						
						<div class="account-email-detail user-item "
							style="display: none;">
							<div class="account-message-header">
								<div class="col-md-9"><h3>添加播单</h3></div>
								<div class="col-md-3 text-right"><button class="btn btn-info glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal"></button></div>
								<div class="clearfix"></div>
								<hr />
							</div>
							<div class="">
								<c:forEach items="${list}" var="l">
									<div class="history-grids">
										<div class="col-md-1 history-left single-right-grid-left">
											<a><img src="${pageContext.request.contextPath }/${l.img_url}" class="img-rounded"></a>
										</div>
										<div class="col-md-10 history-right">
											<h5><a class="title">${l.title }</a></h5>
											<p>${l.intro}</p>
										</div>
										<div class="clearfix"> </div>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End 报表编辑页面内容   -->
		</div>
		<!-- //container -->
	</div>
	<!-- //upload -->
	
<jsp:include page="footer.jsp"></jsp:include>

<!-- 播单添加 -->
	<div class="video-list-toadd"> 
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
				</button>
						<h4 class="modal-title" id="myModalLabel">
					添加播单
				</h4> 
					</div>
					<div class="modal-body">
						<form action="${pageContext.request.contextPath}/videoList/add" method="post" class="videolist_add" enctype="multipart/form-data">
							<table class="my-modal-table table table-bordered">
								<tr>
									<td class="text-right">播单标题：</td>
									<td class=""><input name="title" type="text" value="" class="form-control video_name"/></td>
								</tr>
								<tr>
									<td class=" text-right">播单简介：</td>
									<td class=""><textarea name="intro" type="text" name="" id="" value="" class="form-control video_intro"></textarea></td>
								</tr>
								<tr>
									<td class="text-right">头像：</td>
									<td class=""><input type="file" name="file" id="" value="" class="form-control video_category"/></td>
								</tr>
							</table>
						</form>
					</div>
					<div class="modal-footer clearfix">
							<button type="button" class="btn btn-info" onclick="videolist_add()">保存</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</div>

	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var china = new Object();
		china['北京市'] = new Array('北京市区', '北京市辖区');
		china['上海市'] = new Array('上海市区', '上海市辖区');
		china['天津市'] = new Array('天津市区', '天津市辖区');
		china['重庆市'] = new Array('重庆市区', '重庆市辖区');
		china['河北省'] = new Array('石家庄', '唐山市', '邯郸市', '秦皇市岛', '保市定', '张家市口','承德市', '廊坊市', '沧州市', '衡水市', '邢台市');
		china['山西省'] = new Array('太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市','晋中市', '运城市', '忻州市', '临汾市', '吕梁市');
		china['辽宁省'] = new Array('沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市','锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市');
		china['吉林省'] = new Array('长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市','松原市', '白城市', '延边州', '长白山管委会');
		china['黑龙江省'] = new Array('哈尔滨市', '齐齐哈尔市', '大庆市', '佳木斯市', '牡丹江市','七台河市', '双鸭山市', '黑河市', '鸡西市', '伊春市', '绥化市', '鹤岗市', '加格达奇市');
		china['江苏省'] = new Array('南京市', '苏州市', '无锡市', '常州市', '南通市', '扬州市','镇江市', '泰州市', '盐城市', '连云港市', '宿迁市', '淮安市', '徐州市');
		china['浙江省'] = new Array('杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市','金华市', '衢州市', '舟山市', '台州市', '丽水市');
		china['安徽省'] = new Array('合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市','铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '巢湖市', '六安市', '亳州市','池州市', '宣城市');
		china['福建省'] = new Array('福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市','南平市', '龙岩市', '宁德市');
		china['江西省'] = new Array('南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市','赣州市', '吉安市', '宜春市', '抚州市', '上饶市');
		china['山东省'] = new Array('济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市','潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市','滨州市', '菏泽市');
		china['河南省'] = new Array('郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市','新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市','周口市', '驻马店市');
		china['湖北省'] = new Array('武汉市', '黄石市', '十堰市', '荆州市', '宜昌市', '襄樊市','鄂州市', '荆门市', '孝感市', '黄冈市', '咸宁市', '随州市');
		china['湖南省'] = new Array('长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市','常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市');
		china['广东省'] = new Array('广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市','江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市','清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市');
		china['海南省'] = new Array('文昌市', '琼海市', '万宁市', '五指山市', '东方市', '儋州市');
		china['四川省 '] = new Array('成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市','广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市','雅安市', '巴中市', '资阳市');
		china['贵州省'] = new Array('贵阳市', '六盘水市', '遵义市', '安顺市');
		china['云南省'] = new Array('昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市','普洱市', '临沧市');
		china['陕西省'] = new Array('西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市','汉中市', '榆林市', '安康市', '商洛市');
		china['甘肃省'] = new Array('兰州市', '金昌市', '白银市', '天水市', '嘉峪关市', '武威市','张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市');
		china['青海省'] = new Array('西宁市');
		china['台湾省'] = new Array('台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市','嘉义市');
		china['广西壮族自治区'] = new Array('南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市','钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市');
		china['内蒙古自治区'] = new Array('呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市','鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市');
		china['西藏自治区'] = new Array('拉萨市');
		china['宁夏回族自治区'] = new Array('银川市', '石嘴山市', '吴忠市', '固原市', '中卫市');
		china['新疆维吾尔自治区'] = new Array('乌鲁木齐市', '克拉玛依市');
		china['香港特别行政区'] = new Array('台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市','嘉义市');
		function chinaChange(province, city ) {
			var pv, cv;
			var i,ii;
			pv = province.value;
			cv = city.value;
			city.length = 1;
			if (pv == '0')
				return;
			if (typeof (china[pv]) == 'undefined')
				return;

			for (i = 0; i < china[pv].length; i++) {
				ii = i + 1;
				
				city.options[i] = new Option();
				city.options[i].text = china[pv][i];
				city.options[i].value = china[pv][i];
			}
				

		};
		$(".province_select").each(function(){//给所有的省份加上class，.each函数去循环这些省份属性
			if($(this).val() == "${pv}") {//如果省份属性跟我传过来的PV属性值相等的话就选中。
				var city = document.getElementById('city');//用JS的方式获取ID为city的节点	
				$(this).attr('selected', 'true');//表示进入页面后选中当前的属性值
				for (i = 0; i < china['${pv}'].length; i++) {
					city.options[i] = new Option();//因为有可能要更改个人信息，所以要重新循环省份属性下对应的城市
					city.options[i].text = china['${pv}'][i];
					city.options[i].value = china['${pv}'][i];
					if(city.options[i].value == '${cv}') {//如果当前城市等于传过来的cv属性值的话就选中
						city.options[i].selected = true;
					}
				}
			}
		});
	</script>

	<script type="text/javascript">
	function cl(){
		document.getElementById('oldpassword_register').value="";
		document.getElementById('newpassword_register').value="";
		document.getElementById('confirmpassword_register').value="";
	
	}
	</script>




	<script>
		$(function() {
			$('.report-left-cell').eq(0).css('color', 'white').css(
					'background-color', '#92bbfe');
			$('.report-left-cell').click(
					function() {
						$('.report-left-cell').each(
								function() {
									$(this).css('color', 'black').css(
											'background-color', 'white');
								});
						$('.user-item').each(function() {
							$(this).css('display', 'none');
						});
						$('.user-item').eq($(this).index()).css('display',
								'block');
						$(this).css('color', 'white').css('background-color',
								'#92bbfe');

					});
		});
	
		
		function ale(){
			alert("保存成功，请点击确认，谢谢！");
		};
		
		
		
		
		
		$('.update_submit').click(function() {
			var str = $("#newpassword_register").val();
			var ret = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
			
			if(ret.test(str)){
				password_register()
			}else{
				$('#addMsg').html("密码必须由6-12位数字加字母组成！")
			}
		});
		
		function videolist_add() {
			$('.videolist_add').submit();
		}
		
		
		
		
		function password_register() {
			$.ajax({
				url : "${pageContext.request.contextPath}/users/updatepassword",
				type : "post",//提交方式，POST提交
				async : false,//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
				datatype : 'text',//类型
				data : {
					username:"${username}",
					old_password : $("#oldpassword_register").val(),//获取数据库密码的值
					new_password : $("#newpassword_register").val(),//获取页面输入新密码的值
					confirm_password : $("#confirmpassword_register").val()//获取确认密码的值
				},//提交的请求参数，是键值对，用:隔开
				success:function(redata) { //请求成功的回调函数，参数是响应的返回值
					if('success1'==redata){
						alert("更改成功，请点击确认，谢谢！");
						window.location.reload();
					} else if('error2'==redata){
						$('#addMsg').html("请确认两次密码是否一致");
						$("#oldpassword_register").val('');
						$("#newpassword_register").val('');
						$("#confirmpassword_register").val('');
					} else if('error3'==redata){
						$('#addMsg').html("原始密码不正确");
					$("#oldpassword_register").val('');
					$("#newpassword_register").val('');
					$("#confirmpassword_register").val('');
					}
				}
			});
		};
	</script>
</body>
</html>